<template>
  <div class="banner-warp">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(item, index) in banNerList" :key="index">
        <div class="img-box">
          <img :src="item.imageUrl" alt="" />
          <span class="carousel-text">{{ item.typeTitle }}</span>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getBanNerList } from '@/http/musicApi.ts'
export default {
  name: 'banner',
  data() {
    return {
      banNerList: [],
    }
  },
  methods: {},
  mounted() {
    getBanNerList()
      .then((res) => {
        this.banNerList = Object.freeze(res.banners)
        // console.log(res, '轮播图列表')
      })
      .catch((err) => err)
  },
}
</script>
<style lang="less" scoped>
.banner-warp {
  .img-box {
    height: 250px;
    position: relative;
    // .carousel-text {
    //   display: inline-block;
    //   color: white;
    //   position: absolute;
    //   bottom: 0;
    //   right: 0;
    //   background: yellow;
    // }
    img {
      height: 100%;
    }
  }
}
</style>
